<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>Tables - Ace Admin</title>

		<meta name="description" content="Static &amp; Dynamic Tables" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<link rel="stylesheet" href="../../assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../../assets/font-awesome/4.5.0/css/font-awesome.min.css" />
		<link rel="stylesheet" href="../../assets/css/fonts.googleapis.com.css" />
		<link rel="stylesheet" href="../../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<link rel="stylesheet" href="../../assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="../../assets/css/ace-rtl.min.css" />
		<script href="../../assets/js/ace-extra.min.js"></script>
	</head>

	<body class="no-skin" style="background-color: white;">


		<div style="width: 300px;">
			<!-- 大标题 -->
			<div style="position: relative; left: 40px; top: -20px;">
				<div class="page-header">
					<h3>市场活动-发传单 <br><small>2020-10-10 ~ 2020-10-20</small></h3>
				</div>
				<div style="position: relative; height: 50px; width: 250px;  top: -72px; left: 700px;">
					<button type="button" class="btn btn-default" data-toggle="modal"
						data-target="#editActivityModal"><span class="glyphicon glyphicon-edit"></span> 编辑</button>
					<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span>
						删除</button>
				</div>
			</div>

			<!-- 详细信息 -->
			<div style="position: relative; top: -70px;">
				<div style="position: relative; left: 40px; height: 30px;">
					<div style="width: 300px; color: gray;">所有者</div>
					<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>zhangsan</b></div>
					<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">名称</div>
					<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>发传单</b></div>
					<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
					<div
						style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;">
					</div>
				</div>

				<div style="position: relative; left: 40px; height: 30px; top: 10px;">
					<div style="width: 300px; color: gray;">开始日期</div>
					<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>2020-10-10</b></div>
					<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">结束日期</div>
					<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>2020-10-20</b></div>
					<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
					<div
						style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;">
					</div>
				</div>
				<div style="position: relative; left: 40px; height: 30px; top: 20px;">
					<div style="width: 300px; color: gray;">成本</div>
					<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>4,000</b></div>
					<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -20px;"></div>
				</div>
				<div style="position: relative; left: 40px; height: 30px; top: 30px;">
					<div style="width: 300px; color: gray;">创建者</div>
					<div style="width: 500px;position: relative; left: 200px; top: -20px;">
						<b>zhangsan&nbsp;&nbsp;</b><small style="font-size: 10px; color: gray;">2017-01-18
							10:10:10</small>
					</div>
					<div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
				</div>
				<div style="position: relative; left: 40px; height: 30px; top: 40px;">
					<div style="width: 300px; color: gray;">修改者</div>
					<div style="width: 500px;position: relative; left: 200px; top: -20px;">
						<b>zhangsan&nbsp;&nbsp;</b><small style="font-size: 10px; color: gray;">2017-01-19
							10:10:10</small>
					</div>
					<div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
				</div>
				<div style="position: relative; left: 40px; height: 30px; top: 50px;">
					<div style="width: 300px; color: gray;">描述</div>
					<div style="width: 630px;position: relative; left: 200px; top: -20px;">
						<b>
							市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等
						</b>
					</div>
					<div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
				</div>
			</div>

			<div class="modal fade" id="editActivityModal" role="dialog">
				<div class="modal-dialog" role="document" style="width: 85%;">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">
								<span aria-hidden="true">×</span>
							</button>
							<h4 class="modal-title" id="myModalLabel">修改市场活动</h4>
						</div>
						<div class="modal-body">

							<form class="form-horizontal"  role="form">
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 活动名称: </label>
							
									<div class="col-sm-9">
										<input type="text" id="form-field-1" placeholder="活动名称" class="col-xs-10 col-sm-5" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 成本: </label>
							
									<div class="col-sm-9">
										<input type="text" id="form-field-1" placeholder="成本" class="col-xs-10 col-sm-5" />
									</div>
								</div>
							
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 活动时间: </label>
									
										<div class="col-sm-4" ">
											<div class="widget-body">
												<div class="col-sm-13">
													<div class="input-daterange input-group">
														<input type="text"  class="input-sm form-control"  placeholder="开始时间" name="start" />
														<span class="input-group-addon">
															<i class="fa fa-exchange"></i>
														</span>
							
														<input type="text" class="input-sm form-control"  placeholder="结束时间" name="end"  />
													</div>
												</div>
											</div>
										</div>
									
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 描述: </label>
									<div class="col-xs-12 col-sm-4">	
										<div>
											<textarea  class="form-control limited" id="form-field-9" maxlength="50"></textarea>
										</div>
									</div><!-- /.span -->
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 所有者: </label>
									<div class="col-xs-12 col-sm-4">	
										<select class="form-control" id="form-field-select-1">
											<option value="">张三</option>
											<option value="">李四</option>
											<option value="">王五</option>
											<option value="">赵六</option>
										</select>
																								
									</div><!-- /.span -->
								</div>
								<div class="clearfix ">
									<div class="col-md-offset-3 col-md-9">
										<button class="btn btn-info" type="button">
											<i class="ace-icon fa fa-check bigger-110"></i>
											修改
										</button>
							
										&nbsp; &nbsp; &nbsp;
										<button class="btn" type="reset">
											<i class="ace-icon fa fa-undo bigger-110"></i>
											重置
										</button>
									</div>
								</div>
							</form>
							
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
			if ('ontouchstart' in document.documentElement) document.write(
				"<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
		</script>
		<script src="../../assets/js/bootstrap.min.js"></script>
		<script src="../../assets/js/jquery.dataTables.min.js"></script>
		<script src="../../assets/js/jquery.dataTables.bootstrap.min.js"></script>
		<script src="../../assets/js/dataTables.buttons.min.js"></script>
		<script src="../../assets/js/buttons.flash.min.js"></script>
		<script src="../../assets/js/buttons.html5.min.js"></script>
		<script src="../../assets/js/buttons.print.min.js"></script>
		<script src="../../assets/js/buttons.colVis.min.js"></script>
		<script src="../../assets/js/dataTables.select.min.js"></script>
		<script src="../../assets/js/ace-elements.min.js"></script>
		<script src="../../assets/js/ace.min.js"></script>

		<script type="text/javascript">
			jQuery(function($) {
				
			})
		</script>
	</body>
</html>